// 树形展开组件
<template>
    <div class="info-tree">
        <el-tree
            :data="data_arr"
            node-key="id"
            :props="defaultProps"
            empty-text=""
            :default-expanded-keys="default_expanded_keys"
        >
            <div class="title-name fx1" slot-scope="{ node, data }">
                <div
                    v-if="node.level == 1"
                    class="title-name-first flex jbetween"
                    @click="aa(data.gridName, data.id)"
                >
                    <span>{{ data.gridName }}</span>
                    <!-- <span v-show="show_count">{{ data.count }}家</span> -->
                </div>
                <div
                    v-else-if="node.level == 2"
                    class="title-name-second flex align-c"
                    :class="leaf_level == 2 ? 'gap_row' : ''"
                    @click="aa(data.gridName, data.id)"
                >
                    <!-- <div class="title-point" v-if="leaf_level == 2"></div> -->
                    <div>{{ data.gridName }}</div>
                </div>
                <div
                    v-else-if="node.level == 3"
                    class="title-name-third flex align-c"
                    :class="leaf_level == 3 ? 'gap_row' : ''"
                    @click="aa(data.gridName, data.id)"
                >
                    <!-- <div class="title-point" v-if="leaf_level == 3"></div> -->
                    <div>{{ data.gridName }}</div>
                </div>
            </div>
        </el-tree>
    </div>
</template>

<script>
export default {
    name: "InfoTree",
    props: {
        data_arr: {
            type: Array,
            default: () => [],
        },
        leaf_level: {
            type: [Array, Number],
            default: 2,
        },
        default_expanded_keys: {
            type: [Array, Number],
            default: () => [],
        },
        show_count: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            currentIndex: 0,
            expand: false,
            defaultProps: {
                children: "children",
                label: (data, node) => {

                    if (node.level == 1) {
                        return data.gridName;
                    } else if (node.level == 2) {
                        return data.gridName;
                    }else if (node.level == 3) {
                        return data.gridName;
                    }else if (node.level == 4) {
                        return data.gridName;
                    }
                },
            },
        };
    },
    computed: {
        getGrid() {
            if (this.types == 0) return "18px 23px 1fr;";
            else if (this.types == 1) return "16px 25px 20px 1fr 40px;";
        },
    },
    mounted() {},
    methods: {
        handleToggle() {
            this.expand = !this.expand;
        },
        aa(name, id) {
            this.$emit("tree_select", name, id);
        },
    },
};
</script>

<style>
.el-tree {
    background: rgba(0, 0, 0, 0);
    color: #fff;
}
.el-tree-node {
    /* line-height: 50px; */
}
.el-tree-node__content {
    height: 30px;
}
.el-tree-node__content:hover {
    background-color: rgba(0, 0, 0, 0.35);
}
.el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(0, 0, 0, 0);
}
.el-tree-node__expand-icon {
    color: #0cfdfa;
}
</style>

<style lang="scss" scoped>
.info-tree {
    // background-color: #883;
    .title-name {
        font-size: vh(18);
        // background-color: salmon;
        .gap_row {
            // background-color: aqua;
        }
    }
    .title-point {
        width: vw(4);
        height: vh(4);
        border-radius: 50%;
        background-color: #fff;
        margin-right: vw(4);
    }
}
</style>
